

<template>
    <div class="Main">
        <div class="MainTitle">
            节点管理
        </div>
        <div class="MianContent">
            <div class="MainTopAction">
                <div class="flex align-center">
                    <a-button style="margin-right:10px;" icon="plus" type="primary" @click="AddMenu">新增节点</a-button>
                </div>
                <div class="flex align-center">
                    <a-input v-model="keyword" allowClear @change="InputChange" style="width: 300px;" placeholder="请输入信息查询" />
                    <a-button class="ml-10" type="primary" @click="SeachKeyword">搜索</a-button>
                </div>
            </div>
            <div class="TableView">
                <a-table :columns="listfields" :data-source="listData" bordered size="middle" :pagination="false">
                    <div slot="action" slot-scope="row, index">
                        <a-button v-if="index.parentId == 0" style="margin:0 10px 0 0;" type="info" size="small" @click="AddChildNode(index)">添加子节点</a-button>
                        <a-button style="margin:0 10px 0 0;" type="primary" size="small" @click="EditNode(index)">详情</a-button>
                        <a-popconfirm placement="bottom" ok-text="删除" cancel-text="取消" @confirm="DeleteItem(index)">
                            <template slot="title">
                                <p>警告</p>
                                <p>此操作将删除该商品, 是否继续?</p>
                            </template>
                            <a-button type="danger" size="small">删除</a-button>
                        </a-popconfirm>
                    </div>
                    <div slot="icon" slot-scope="row,index">
                      <!-- <a-icon :type="row" /> -->
                      {{row}}
                    </div>
                    <div slot="isMenu" slot-scope="row,index">
                      <!-- <a-icon :type="row" /> -->
                      {{row==0?'是':'否'}}
                    </div>
                </a-table>
                <Pagination :total="total" v-model="pageno" :pageSize.sync="pagesize" @change="handlePageChange" @onShowSizeChange="onShowSizeChange"></Pagination>
            </div>
        </div>
        <a-modal :title="ModalTitle" v-model="visible" :width="800" :centered="true" :maskClosable="false" @ok="handleOk" @cancel="handleCancel">
            <div style="padding-left: 10px;">
                <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-form-model-item label="节点名称title" prop="title">
                        <a-input v-model="form.title" placeholder="请输入节点名称" allowClear />
                    </a-form-model-item>
                    <a-form-model-item label="节点icon" prop="icon">
                        <a-input v-model="form.icon" placeholder="请输入节点icon" allowClear />
                    </a-form-model-item>
                    <a-form-model-item label="路由path" prop="path">
                        <a-input v-model="form.path" placeholder="请输入路由path" allowClear />
                    </a-form-model-item>
                    <a-form-model-item label="路由名称name" prop="name">
                        <a-input v-model="form.name" placeholder="请输入路由名称" allowClear />
                    </a-form-model-item>
                    <a-form-model-item label="对应文件路径" prop="component">
                        <a-input v-model="form.component" placeholder="请输入对应前端文件路径" allowClear />
                    </a-form-model-item>
                    <a-form-model-item label="排序" prop="sort">
                        <a-input v-model="form.sort" placeholder="请输入排序" allowClear />
                    </a-form-model-item>
                    <a-form-model-item label="是否自动关闭tab">
                        <a-switch v-model="form.closeTab" />
                    </a-form-model-item>
                    <a-form-model-item label="是否在列表隐藏">
                        <a-switch v-model="form.hidden" />
                    </a-form-model-item>
                    <a-form-model-item label="是否缓存">
                        <a-switch v-model="form.keepAlive" />
                    </a-form-model-item>
                </a-form-model>
            </div>
        </a-modal>
    </div>
</template>

<script>
    import { mapGetters, mapState, mapActions } from 'vuex';
    import { showErrors, showError, showSuccess } from '@/utils/showMsg';
    import Pagination from '@/components/common/pagination.vue'
    import { MenuList } from '@/views/Columns/Root'
    import { GetMenuList, AddBaseMenu, UpdateBaseMenu, DeleteBaseMenu } from '@/api/api.js';
    import env from '@/config/env';
    import request from '@/utils/request';

    export default {
        name: 'list',
        components: {
            Pagination,
        },
        data() {
            return {
                total: 0, //定义初始有多少条数据
                pageno: 1, //默认第几页
                pagesize: 10, //一页显示多少条数据
                keyword: '',
                OrderStatus: '',
                listfields: MenuList, //表头列表
                listData: [], //表格数据
                cate:undefined, //进食阶段
                allergy:undefined, //辅食类型

                labelCol: { span: 4 },
                wrapperCol: { span: 20 },
                visible:false,
                ModalTitle:'新增节点',
                form:{
                  title:'',
                  icon:'',
                  path:'',
                  name:'',
                  component:'',
                  sort:'',
                  closeTab:false,
                  hidden:false,
                  keepAlive:false,
                  parentId:0, //父id
                },
                nodeId:null, //菜单ID

                rules:{
                  title: [
                    { required: true, message: "请输入节点名称!", trigger: "blur" },
                  ],
                  icon: [
                    { required: true, message: "请输入节点Icon!", trigger: "blur" },
                  ],
                  path: [
                    { required: true, message: "请输入路由path!", trigger: "blur" },
                  ],
                  name: [
                    { required: true, message: "请输入路由名称!", trigger: "blur" },
                  ],
                  component: [
                    { required: true, message: "请输入对应前端文件路径!", trigger: "blur" },
                  ],
                  sort: [
                    { required: true, message: "请输入排序!", trigger: "blur" },
                  ],
                },
            };
        },
        computed: {
            ...mapState({}),
        },
        created() {},
        mounted() {
            let that = this;
            that.GetList()
        },
        methods: {
            ...mapActions({}),

            // 选择分类
            selectCateFn(){

            },

            // 选择是否过敏
            selectAllergyFn(){

            },

            InputChange(e) {
                let that = this
                if (e.target.value == '') {
                    that.GetList()
                }
            },
            SeachKeyword() {
                let that = this;
                that.GetList()
            },
            GoOrderDetail(row) {
                this.$router.push({ name: 'OrderInfo', query: { id: row.id, back: 'OrderList' } })
            },
            // 获取数据列表API
            async GetList() {
                let that = this
                let params = {
                    keyword: that.keyword,
                    page: that.pageno,
                    pageSize: that.pagesize,
                }
                const res = await GetMenuList(params)
                if (res.data.code == 0) {
                    // console.log(res.data);
                    const data = res.data.data
                    if (data.list.length > 0) {
                        data.list.forEach((item, index) => {
                            item.key = item.ID
                            item.CreatedAt = new Date(item.CreatedAt).toLocaleString(); //地区时间转换
                            if(item.children && !item.children.length){
                              item.children = null
                            }
                            if(item.children && item.children.length){
                                item.children.forEach(items => {
                                    items.CreatedAt = new Date(items.CreatedAt).toLocaleString(); //地区时间转换
                                    items.key = items.ID
                                })
                            }
                            // item.create_time = that.$moment(item.create_time * 1000).format('YYYY-MM-DD  HH:mm:ss'); //时间戳转换成时间
                        })
                    }
                    // console.log(data);
                    that.total = data.total
                    that.listData = data.list
                } else {
                    showError(res.data.msg)
                }
            },

            // 删除节点
            async DeleteItem(row){
                const that = this;
                let res = await DeleteBaseMenu({id:row.ID})
                if(res.data.code == 0){
                    showSuccess('删除成功！')
                    that.GetList()
                }else{
                    showError(res.data.msg)
                }
            },

            // 新增父节点按钮
            AddMenu(){
              const that = this;
              that.visible = true;
              that.form.parentId = 0;
              that.ModalTitle = '新增节点';
            },
            // 新增子节点按钮
            AddChildNode(row){
              const that = this;
              that.visible = true;
              that.ModalTitle = '新增子节点';
              that.form.parentId = row.ID;
            },

            // 编辑按钮
            EditNode(row){
                const that = this;
                that.visible = true;
                if(row.parentId == 0){
                    that.ModalTitle = '编辑节点';
                    that.form.parentId = 0;
                }else{
                    that.ModalTitle = '编辑子节点';
                    that.form.parentId = row.parentId;
                }
                that.nodeId = row.ID;
                that.form.title = row.meta.title;
                that.form.icon = row.meta.icon;
                that.form.path = row.path;
                that.form.name = row.name;
                that.form.component = row.component;
                that.form.sort = row.sort;
                that.form.closeTab = row.meta.closeTab;
                that.form.hidden = row.hidden;
                that.form.keepAlive = row.meta.keepAlive;
            },

            // 关闭对话框
            handleCancel(){
                const that = this;
                that.$refs.ruleForm.resetFields();
                that.nodeId = null;
                that.form.parentId = 0;
                that.form.title = '';
                that.form.icon = '';
                that.form.path = '';
                that.form.name = '';
                that.form.component = '';
                that.form.sort = '';
                that.form.closeTab = false;
                that.form.hidden = false;
                that.form.keepAlive = false;
                console.log(that.form);
            },

            // 弹窗确认按钮
            handleOk(){
              const that = this;
              that.$refs["ruleForm"].validate( async (valid) => {
                if(valid){
                  let params = {
                    path:that.form.path,
                    name:that.form.name,
                    component:that.form.component,
                    sort:that.form.sort*1,
                    hidden:that.form.hidden,
                    parentId:that.form.parentId.toString(),
                    meta:{
                        keepAlive:that.form.keepAlive,
                        defaultMenu:false,
                        title:that.form.title,
                        icon:that.form.icon,
                        closeTab:that.form.closeTab
                    }
                  }
                  let res;
                  if(that.nodeId){ 
                    //编辑
                    params.id = that.nodeId;
                    // if(that.form.parentId != 0){
                    //     params.authoritys= null
                    //     params.children= null
                    //     params.parameters= []
                    //     params.menuBtn= []
                    // }
                    res = await UpdateBaseMenu(params)
                  }else{
                    // 新增
                    params.id = 0
                    res = await AddBaseMenu(params)
                  }
                  if(res.data.code == 0){
                    showSuccess(that.nodeId?'编辑成功！':'新增成功！')
                    that.handleCancel()
                    that.visible = false
                    that.GetList()
                  }else{
                    showError(res.data.msg)
                  }
                  
                }
              })
            },


            //分页器 
            handlePageChange(pageno, pagesize) { //点击第几页触发的函数
                let that = this;
                that.pageno = pageno;
                that.pagesize = pagesize;
                that.GetList(); //这个是向后台请求的数据函数
            },
            //切换每页显示多少条
            onShowSizeChange(current, size) { //改变每页显示条目数的函数
                let that = this;
                //pagesize 变化的回调
                that.pageno = current;
                that.pagesize = size;
                that.GetList(); //这个是向后台请求的数据函数
            },
        },
    };
</script>

<style scoped lang="less">
    .Main {
        border-radius: 10px;
        overflow: hidden;
        background: #fff;

        .MainTitle {
            font-size: 24px;
            color: #333;
            margin: 10px 20px;
            position: relative;
        }

        .MainTitle:before {
            content: '';
            width: 40px;
            height: 12px;
            background: linear-gradient(270deg, rgba(0, 158, 238, 0) 0%, rgba(221, 169, 85, 0.3) 100%);
            position: absolute;
            bottom: 2px;
            left: 0;
        }

        .MianContent {
            padding: 10px 20px 20px 20px;

            .MainTopAction {
                margin-bottom: 20px;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                justify-content: space-between;
            }

            .TabsItem {
                padding: 10px 0;
                width: 70px;
                position: relative;
                margin-right: 24px;
                text-align: center;
                cursor: pointer;
                margin-bottom: 20px;
                color: #000;
            }

            .TabsIndex {
                color: #DDA955;
            }

            .TabsIndex::before {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translate(-50%, 0%);
                width: 50px;
                height: 2px;
                background-color: #DDA955;
            }
        }
    }
</style>